<script>
export default {
  data() {
    return {
      keyword: ''
    }
  },
  props: {
    treeData: {
      type:Array,
      default: []
    },
    height: {
      type:Number,
      default: 400
    },
    width: {
      type:Number,
      default:200
    },
    topHeader: {
      type:Number,
      default:40
    }
  },
  computed: {
    contentHeader () {
      return this.height - this.topHeader
    }
  },
  methods: {
    onSelectChange(row) {
      this.$emit('tree-click', row)
    },
    onSearch(keyword) {

    },
    renderContent (h, { root, node, data }) {
      if(data.children.length > 0) {
          return h('span', [
            h('Icon', {
                props: {
                    type: 'ios-folder-outline'
                },
                style: {
                    marginRight: '8px'
                }
            }),
            h('span', {
              style: {
                    cursor: 'pointer'
              },
              on: {
                  click: () => { this.onSelectChange(data) }
              }
            }, data.title)
          ])
      } else {
        return h('span', [
            h('Icon', {
                props: {
                    type: 'ios-paper-outline'
                },
                style: {
                    marginRight: '8px'
                }
            }),
            h('span', {
              on: {
                  click: () => { this.onSelectChange(data) }
              },
              style: {
                    cursor: 'pointer'
              },
            },data.title)
          ])
      }
  },
  }
};
</script>

<template>
  <div class="main-tree" :style="{width:width + 'px'}">
    <div class="main-tree-header" v-bind:style="{ height:topHeader+'px',lineHeight: topHeader + 'px' }">
      <slot name="header"></slot>
    </div>
    <div class="main-tree-content" :style="{height:contentHeader + 'px'}">
      <Tree :data="treeData" :render="renderContent"></Tree>
    </div>
  </div>
</template>

<style lang="less" scoped>
.main-tree {
  overflow: hidden;
  border-right: 1px solid #f0f0f0;
  position: absolute;
  .main-tree-header {
    border-bottom:1px solid #f0f0f0;
    padding:0 5px;
  }
  .main-tree-content {
    overflow-y: auto;
  }
}
</style>


